<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Demo of Google SMD / Translate test</title>
    <style type="text/css">
        body, html {
            width   : 100%;
            margin  : 0;
            padding : 0;
        }

        .logo {
            border         : 0;
            vertical-align : middle;
        }

        .summary {
            color : #666;
            font  : 8pt Arial, sans-serif;
        }

        #container {
            width  : 760px;
            margin : 0 auto;
        }

        #loader {
            position   : absolute;
            top        : 3px;
            left       : 3px;
            visibility : hidden;
            height     : 50px;
            width      : 50px;
            background : url("../../../dojox/image/resources/images/loading.gif") no-repeat center center;
        }

        .inputBox {
            width : 300px;
        }

        .warn {
            color : magenta;
        }

        .over {
            color : red !important;
        }
    </style>

    <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dojox.rpc.Service");
        dojo.require("dojo.io.script");
        var google, showLoader, hideLoader = null;
        function init() {
            var s = dojo.query("select.clone")[0];
            var n = dojo.clone(s);
            dojo.attr(s, "id", "fromLang");
            dojo.attr(n, "id", "toLang");
            dojo.place(n, "target", "after");
            google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc", "SMDLibrary/google.smd"));
            showLoader = dojo.hitch(dojo, "style", "loader", "visibility", "visible");
            hideLoader = dojo.hitch(dojo, "style", "loader", "visibility", "hidden");
            dojo.connect(dojo.byId("test"), "onkeypress", function (e) {
                var n = dojo.byId('test');
                var len = n.value.length + 1;
                if (len >= 400 && len < 500) {
                    if (!dojo.hasClass("progress", "warn")) {
                        dojo.addClass("progress", "warn");
                    }
                } else if (len >= 501) {
                    n.value = n.value.substr(0, 500)
                    if (!dojo.hasClass("progress", "over")) {
                        dojo.addClass("progress", "over");
                    }
                    return false;
                } else {
                    dojo.removeClass("progress", "over");
                    dojo.removeClass("progress", "warn");
                }
                dojo.byId("used").innerHTML = len + "";
            });
            var runner = function (e) {
                var pair = dojo.byId("fromLang").value + "|" + dojo.byId("toLang").value;
                google.translate({ q: dojo.byId("test").value, langpair: pair }).addBoth(function (response) {
                            var r = response.responseData;
                            if (r && r.translatedText) {
                                dojo.byId("response").value = r.translatedText;
                            }
                            dojo.byId("flop").disabled = false;
                        });
            };
            dojo.connect(dojo.byId("doit"), "onclick", runner);
            dojo.connect(dojo.byId("flop"), "onclick", function (e) {
                // take the value from the translated text, dump it in the incoming
                // and set the values opposite
                var input = dojo.byId("test");
                var resp = dojo.byId("response");
                var trans = resp.value;
                resp.value = "";
                input.value = trans;
                var cur = dojo.byId("fromLang").selectedIndex;
                dojo.query("#toLang option").map(function (n) {
                    return (n.selected) ? n : false;
                }).forEach(function (n, i) {
                            if (n) {
                                dojo.byId("fromLang").selectedIndex = i;
                                dojo.byId("toLang").selectedIndex = cur;
                            }
                        });
                dojo.byId("flop").disabled = true;
                runner();
            });
        }
        dojo.addOnLoad(init);

    </script>
</head>

<body>
<div id="loader"></div>
<div id="container">
    <h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google"/></a> Ajax API SMD / Translation Test</h2>

    <div id="progress">Used: <span id="used">?</span> of 500 max.</div>
    <textarea id="test" style="float:left; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
    <textarea id="response" style="float:right; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>

    <br style="clear:both">

    <div style="padding-top:15px;">
        From:
        <select class="clone">
            <option value="ar">Arabic</option>
            <option value="bg">Bulgarian</option>
            <option value="zh-CN">Chinese (Simplified)</option>
            <option value="zh-TW">Chinese (Traditional)</option>
            <option value="hr">Croatian</option>
            <option value="cs">Czech</option>
            <option value="da">Danish</option>
            <option value="nl">Dutch</option>
            <option SELECTED value="en">English</option>
            <option value="fi">Finnish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="el">Greek</option>
            <option value="hi">Hindi</option>
            <option value="it">Italian</option>
            <option value="ja">Japanese</option>
            <option value="ko">Korean</option>
            <option value="no">Norwegian</option>
            <option value="pl">Polish</option>
            <option value="pt">Portuguese</option>
            <option value="ro">Romanian</option>
            <option value="ru">Russian</option>
            <option value="es">Spanish</option>
            <option value="sv">Swedish</option>
        </select>

        <span id="target">To: &nbsp;</span>

        <button id="doit">Translate</button>
        <button id="flop" disabled="disabled">Flip Back</button>

    </div>


</div>


</body>
</html>
